<template>
    <div class="home">
        <!-- 头 -->
        <header>
            <div class="w clearfix">
                <!-- 登录...购物车 -->
                <ol class="fr clearfix">
                    <li v-if="!dlFlag" class="fl"><span @click="dl">登录</span>|<span @click="zc">注册</span></li>
                    <li v-if="dlFlag" class="fl">
                        <el-popconfirm title="你确定要退出登录吗？" @confirm="esc">
                            <template #reference>
                                <span>{{Username}}</span>
                            </template>
                        </el-popconfirm>
                    </li>
                    <li class="fl"><span @click="router.push('/orders')">我的订单</span></li>
                    <li class="fl"><span @click="router.push('/like')">我的收藏</span></li>
                    <li class="fl" @click="router.push('/cate')"><el-icon><ShoppingCart /></el-icon>购物车(0)</li>
                </ol>
            </div>
        </header>
            <!-- 导航 -->
            <nav>
                <div class="w">
                    <img src="../assets/imgs/logo.png" alt="">
                    <ol class="clearfix">
                      <li class="fl"><router-link to="/home">首页</router-link></li>
                      <li class="fl"><router-link to="/goods">全部商品</router-link></li>
                      <li class="fl"><router-link to="/about">关于我们</router-link></li>
                    </ol>
                    <div class="input_box clearfix">
                         <el-input  class="fl search_input" v-model="input" placeholder="请输入搜索内容" clearable />
                         <el-button class="fr search_button" @click="search"><el-icon><Search /></el-icon></el-button>
                    </div>
                </div>
            </nav>
        <!-- 内容 -->
        <router-view></router-view>
        <!-- 脚 -->
        <footer>
            <div class="tab">
                <dl class="w">
                    <dd class="clearfix">
                        <span class="imgsplice fl"></span><span class="cont fr">七天无理由退货</span>
                    </dd>
                    <dd class="clearfix">
                        <span class="imgsplice fl"></span><span class="cont fr">满99元全场免邮</span>
                    </dd>
                    <dd class="clearfix">
                        <span class="imgsplice fl"></span><span class="cont fr">100%品质保证</span>
                    </dd>
                </dl>
            </div>
            <div class="bottom">
                <img src="../assets/imgs/github.png" alt="">
                <ol class="clearfix">
                    <li class="fl">首页</li>
                    <li class="fl line"></li>
                    <li class="fl">全部商品</li>
                    <li class="fl line"></li>
                    <li class="fl">关于我们</li>
                </ol>
                <p>商城版权所有©2012-2021</p>
            </div>
        </footer>
        <!-- 登录 -->
         <!-- 弹框 -->
        <el-dialog  v-model="store.state.dialog1" title="登录" :center="true" top="20%" width="500px">
            <el-form :rules="rules" :model="dlForm">
            <el-form-item class="father" label="用户名" :label-width="70" prop="userName">
                <el-input type="text" v-model="dlForm.userName" />
            </el-form-item>
            <el-form-item class="father" label="密码" :label-width="70" prop="password">
                <el-input type="password" v-model="dlForm.password"/>
            </el-form-item>
            </el-form>
            <div class="dialog-footer" style="textAlign:center">
                  <el-button  type="primary" @click="login">登录</el-button>
            </div>
        </el-dialog>
        <!-- 注册 -->
        <el-dialog  v-model="store.state.dialog2" title="注册" :center="true" top="20%" width="500px">
            <el-form :rules="rules" :model="zcForm">
            <el-form-item class="father" label="用户名" :label-width="100" prop="userName">
                <el-input type="text" v-model="zcForm.userName" />
            </el-form-item>
            <el-form-item class="father" label="密码" :label-width="100" prop="password">
                <el-input type="password" v-model="zcForm.password"/>
            </el-form-item>
            <el-form-item class="father" label="确认密码" :label-width="100" prop="repassword">
                <el-input type="password" v-model="zcForm.repassword"/>
            </el-form-item>
            </el-form>
            <div class="dialog-footer" style="textAlign:center">
                  <el-button  type="primary" @click="exit">注册</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage,ElNotification } from 'element-plus'
import Dialog from '@/components/Dialog.vue'
import { ShoppingCart,Search } from '@element-plus/icons-vue'
import { ref ,onMounted,reactive  } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Login, exitUser,findUser } from '@/utils/last.js'
const router = useRouter();
const store = useStore();
const dlFlag = ref(false);
const Username = ref('');
const input = ref('');
const search = ()=>{
    console.log('搜索');
}
// 登录
const dlForm = reactive({
    password:'a123456',
    userName:'xiaoliu2'
})
const userNameRule = /^([a-zA-z][a-zA-Z0-9_\u4e00-\u9fa5]{4,16})$/;
const pwdNameRule =  /^([a-zA-z][a-zA-Z0-9_\u4e00-\u9fa5]{5,18})$/;

const zcForm = reactive({
    userName:'',
    password:'',
    repassword:''
})



const  validateSampType = (rule, value, callback)=>{
      if(value != zcForm.password) { 
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
const rules = {
        userName:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { pattern: userNameRule, message: '用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)', trigger: ['blur', 'change'] }
        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { pattern: pwdNameRule, message: '密码不合法(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)', trigger: ['blur', 'change'] }
        ],
        repassword:[
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: validateSampType, trigger: 'change' }
        ]
    }
const dl = ()=>{
    store.commit('dialog1Change');
}
const login = async ()=>{
    let data = await Login(dlForm);
    console.log(data);
    if(data.code == '001'){
        ElNotification.success(data.msg);
        store.commit('Dl',data.user);
        store.commit('dialog1Change');
        dlFlag.value = true;
        Username.value = `欢迎,${dlForm.userName}`;
        dlForm.userName = dlForm.password = '';
    }
}
// 注册
const zc = ()=>{
    store.commit('dialog2Change');
}
const exit = async ()=>{
    let data = await exitUser(zcForm);
    console.log(data);
    if(data.code == '001'){
        ElNotification.success(data.msg);
        store.commit('dialog2Change');
        zcForm.userName = zcForm.password = zcForm.repassword = '';
    }
}
// 退出
const esc = ()=>{
    dlFlag.value = false;
    store.commit('Esc');
    ElNotification.success('退出成功');
}
onMounted(() => {
  if(localStorage.getItem('userName')){
        Username.value = `欢迎,${dlForm.userName}`;
        dlFlag.value = true;
  }  
})
</script>
<style lang="scss" scoped>
    .home{
        width: 100%;
        header{
            height: 40px;
            background-color: rgb(32, 32, 32);
            .w{
                height: 100%;
                // background: pink;
                ol{
                    li{
                        font-size: 14px;
                        line-height: 40px;
                        padding: 0 10px;
                        color: #ccc;
                        &>span{
                            padding: 0 10px;
                        }
                        span:hover{
                            color: #fff;
                        }
                    }
                    li:last-child{
                        background: rgb(49, 49, 49);
                        padding: 0 20px;
                    }
                    li:last-child:hover{
                        background: #fff;
                        color: red;
                    }
                }
            }
        }
        nav{
            margin-top: 20px;
            // background-color: #ccc;
            &>.w{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                ol{
                    height: 100%;
                    width: 500px;
                    li{
                        color: #777;
                        a{
                            display: inline-block;
                            padding: 20px;
                        }
                    }
                    li>a:hover{
                        color: #000;
                    }
                    li>.router-link-active{
                        color: rgb(30, 127, 238);
                        border-bottom: 2px solid rgb(30, 127, 238);
                    }
                }
                .input_box{
                    width: 300px;
                    margin-top: 16px;
                    height: 34px;
                    border: 1px solid #ccc;
                    background: #fff;
                    border-radius: 3px;
                    .search_input{
                        height: 100%;
                        width: 252px;
                        border-radius: 0px;
                        border: 0;
                    }
                    .search_button{
                        border-radius: 0px;
                        height: 100%;
                        border-left: 1px solid #ccc;
                    }
                }
            }
        }
        footer{
            width: 100%;
            height: 400px;
            background: rgb(41, 41, 41);
            .tab{
                width: 100%;
                height: 150px;
                border-bottom: 1px solid rgb(75, 75, 75);
                dl{
                    height: 60px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    padding-top: 60px;
                    dd{
                        color: #fff;
                        height: 60px;
                        width: 200px;
                        .imgsplice{
                            display: inline-block;
                            width: 40px;
                            height: 40px;
                            background-image: url(../assets/imgs/us-icon.png);
                            background-repeat: no-repeat;
                            background-size: 100%;
                        }
                        .cont{
                            font-size: 20px;
                            display: inline-block;
                            line-height: 40px;
                        }
                    }
                }
            }
             .bottom{
                    text-align: center;
                    color: #777;
                    font-size: 18px;
                    img{
                        width: 60px;
                        margin: 30px 0;
                    }
                    ol{
                        margin: 0 auto;
                        width: 290px;
                        li{
                            margin: 0 10px;
                        }
                        .line{
                            border-left: 1px solid #777;
                            height: 18px;
                            margin-top: 2px;
                        }
                    }
                    p{
                        margin-top: 20px;
                    }
                }
        }
    }
</style>